<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('入参来源设置')" />
    <link th:href="@{/css/common.css}" rel="stylesheet"/>
    <link th:href="@{/css/edit.css}" rel="stylesheet"/>
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: bootstrap-select-css" />
    <style type="text/css">
        .red {
            color: red !important;
        }

        body .layer-ext-moon .layui-layer-btn .selfBtn {
            background: #f60 !important;
            color: #fff !important;
            border: 1px solid #f60 !important;
            border-radius: 3px !important;
            float: right;
        }
        .inParamSource .layer-ext-moon .layui-layer-btn .layui-layer-btn2 {
            background: #f60!important;
            color: #fff!important;
            border: 1px solid #f60!important;
            float: right;
        }
    </style>
</head>
<body class="gray-bg inParamSource">
<div class="wrapper wrapper-content ">
    <input type = "hidden" name="pageId" th:value="${pageId}">
    <input type = "hidden" id="id" th:value="${interfaceId}">
    <input type = "hidden" id="fbType" th:value="${interfaceInfo.fbType}">
    <div class="col-md-12">
        <div class="header buff-header">
            <h4 class="fz16" th:text="${interfaceInfo.interfaceName}"></h4>
        </div>
        <div class="row">
            <div class="col-md-6 left">
                <div class="tab-content">
                    <div class="content tab-pane active" role="tabpanel" id="left-one">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="active"><a href="#params-in" role="tab" data-toggle="tab">入参来源设置</a></li>
                            <li><a href="#edit-interface" role="tab" data-toggle="tab" data-action="getImgInterfaceAliasName">编辑接口</a></li>
                        </ul>
                        <div class="tab-content paramSelect">
                            <div role="tabpanel" class="tab-pane active paramList" id="params-in">
                            </div>
                            <div role="tabpanel" class="tab-pane paramList" id="edit-interface">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="ibox-content">
                                            <form class="form-horizontal" id="pageTagForm">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">接口别名：</label>
                                                    <div class="col-sm-9">
                                                        <input  name="alisaName" id="alisaName" type="text" class="form-control" placeholder="接口别名" required>
                                                    </div>
                                                </div>
                                                <div class="form-group" style="text-align: center;">
                                                    <button onclick="submitHandler()" class="btn btn-primary btn-rounded btn-sm" style="height: 32px;line-height: 1;width: 132px;background: #0088FF;margin-top: 32px;" type="button">保存</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 right">
                <ul class="nav nav-tabs first-navtabs contentTab" role="tablist">
                    <li class="active"><a href="#content-preview" role="tab" data-action = "" data-toggle="tab">预览</a></li>
                    <li><a href="#content-table" role="tab" data-toggle="tab" data-action = "relationTableList">表模型</a></li>
                    <li><a href="#content-usage" role="tab" data-toggle="tab" data-action = "relationUsageList">用况</a></li>
                    <li><a href="#content-page" role="tab" data-toggle="tab" data-action = "relationPageList">页面</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active mt20 " id="content-preview">
                        <div class="ibox-content content-preview">
                            <div class="panel-body">
                                <div class="panel-group" id="accordion">
                                    <div class="panel panel-default">
                                        <div class="panel-heading" data-toggle="collapse" href="#collapse0">
                                            <div class="panel-title">
                                                <div class="pull-left" style="margin-right: 20px;">
                                                    <span class="label type-flag" th:text="${interfaceInfo.interfaceType=='1'?'GET': (interfaceInfo.interfaceType=='2' ? 'POST' : (interfaceInfo.interfaceType=='3' ? 'PUT' : 'DELETE'))}">增</span>
                                                    [[${interfaceInfo.interfaceName}]]
                                                </div>
                                                <div class="pull-left" th:text="${interfaceInfo.interfaceUrl}">/createVersion</div>
                                            </div>
                                        </div>
                                        <div id="collapse0" class="panel-collapse collapse in">
                                            <dl class="dl-horizontal">
                                                <dt>非功能性需求</dt>
                                                <dd id="nonFunctionalRequirementsDd"></dd>
                                            </dl>
                                            <dl class="dl-horizontal">
                                                <dt>接口描述</dt>
                                                <dd id="interfaceDescriptionDd"></dd>
                                            </dl>
                                            <div class="panel-tit">参数</div>
                                        </div>
                                    </div>
                                    <div class="panel-tit" id="virtualUsage">虚拟用况</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane content-table mt20" id="content-table"></div>
                    <div role="tabpanel" class="tab-pane content-usage mt20" id="content-usage"></div>
                    <div role="tabpanel" class="tab-pane mt20 content-page" id="content-page"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: bootstrap-select-js" />
<script th:inline="javascript">
    var prefix = ctx + "interface/interface";
    var interfaceId = [[${interfaceId}]];
    var pageImgId = [[${pageImgId}]];
    var ckeckData = {};
    $("body").on('click', ".source-set", function(e) {
        var btn = ['确定','重置', '取消'];
        var pageId= $("input[name='pageId']").val();
        ckeckData = $(this).data()
        var options = {
            title: '入参来源设置',
            height: "600",
            id:"fontSourceSet",
            width: $(window).width() - 50,
            url: ctx + "page/page/new" + "/setSource/"+pageId+"/"+ckeckData.id+"?interfaceId="+interfaceId+"&pageImgId="+pageImgId+"&type="+ckeckData.type,
            btn: btn,
            callBack: function (index, layero) {
                var iframeWin = layero.find('iframe')[0];
                iframeWin.contentWindow.submitHandler(index, layero);
                queryBffInterfaceField();
                return false;
            },
            btn2:function (index,layero) {
                var iframeWin = layero.find('iframe')[0];
                iframeWin.contentWindow.resetHandler(index, layero);
                queryBffInterfaceField();
                return false
            }
        };
        $.modal.openOptions(options);
    }).on('click', ".table-detail", function () {
        var tableId = $(this).attr("tableId");
        $.operate.addTab2("表详情", prefix + "/table_detail/" + tableId);
    }).on('click', ".usage-detail", function () {
        var usageId = $(this).attr("usageId");
        $.operate.addTab2("用况详情", ctx + "usage/usage/detail/" + usageId);
    }).on('click','.virtualUsage .panel-heading',function(){
        var idName = $(this).attr("href");
        $(idName).html().length ==0 && paramList(idName, $(this).data("id"), 3);
    }).on('click', ".partPage", function(e) {
        var url = $(this).attr("src");
        var json = {
            "title": "预览",
            "start": 0,
            "data": [{
                "src": url,
            }]
        };
        layer.photos({
            photos: json,
            closeBtn: 0, //右上角按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
            anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });
    }).on('change', ".nodeType", function (e) {
        var id = $(this).find("option:selected").attr("data");
        var value = $(this).val();
        var config = {
            url: prefix + "/updateFieldNodeType",
            type: "post",
            dataType: "json",
            data: "id="+id +"&nodeType=" + value,
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    loadInterfaceParams();
                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config);
    }).on('click', '.deleteImg', function () {
        var id = $(this).attr('data');
        var url = ctx + "page/page/deleteImg?id=" + id;
        var config = {
            url: url,
            type: "post",
            dataType: "json",
            data: null,
            success: function(result) {
                relationPageList();
            }
        };
        $.ajax(config);
    }).on('change', '.isRequiredSelect', function () {
        var id = $(this).find("option:selected").attr("data");
        var type = $(this).find("option:selected").attr("data-type");
        var value = $(this).val();
        var config = {
            url: prefix + "/updateIsRequired",
            type: "post",
            dataType: "json",
            data: "id="+id +"&type=" + type + "&isRequired=" + value,
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
            }
        };
        $.ajax(config);
    }).on('click', '.pageImgName', function () {
        var id = $(this).attr("data-id");
        var interfaceId=$("#id").val();
        var config = {
            url: ctx + "page/page/new/queryPartImgByParentIdAndInterface",
            type: "post",
            dataType: "json",
            data: "interfaceId="+interfaceId +"&parentId=" + id,
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                $("#interfacePartNum").text(result.data.length);
                $("#interfacePartUl").empty();
                for(var i=0; i<result.data.length; i++) {
                    $("#interfacePartUl").append('<li class="list-group-item"><img class = "partPage" src="'+result.data[i].filePath+'"/><p style="text-align: center">'+result.data[i].fileName+'</p></li>');
                }
            }
        };
        $.ajax(config);
    }).on("click",".nav-tabs li a", function () {
        var action = $(this).data("action");
        action && window[action]()
    });
    $(function() {
        queryBffInterfaceField();
        loadInterfaceParams();
        $(".contentTab a").click(function (e) {
            var action = $(this).data("action");
            if(action) {
                window[action]();
            }
        });
    })
    // 获取入参列表
    function queryBffInterfaceField(){
        var config = {
            url: ctx + "frontInterfaceFieldSource/frontInterfaceFieldSource/queryBffInterfaceField",
            type: "get",
            dataType: "json",
            data: {
                interfaceId:$("#id").val(),
                isInParam:1,
                pageImageId:pageImgId,
                pageId:$("input[name='pageId']").val()
            },
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    var paramsTplHtml = $("#paramsTpl").html();
                    laytpl(paramsTplHtml).render(result.data, function (html) {
                        $("#params-in").html('')
                        $("#params-in").html(html);
                    });
                }
            }
        };
        $.ajax(config);
    }
    function initSelectChange() {
        $(".paramSelect .fieldStatus").change(function () {
            var id = $(this).find("option:selected").attr("data");
            var value = $(this).val();
            var config = {
                url: prefix + "/updateBffFieldStatus",
                type: "post",
                dataType: "json",
                data: "id="+id +"&statusId=" + value,
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍后...");
                },
                success: function(result) {
                    $.modal.closeLoading();
                    if (result.code == web_status.SUCCESS) {
                        loadInterfaceParams();
                    } else if (result.code == web_status.WARNING) {
                        $.modal.alertWarning(result.msg)
                    } else {
                        $.modal.alertError(result.msg);
                    }
                }
            };
            $.ajax(config);
        });
    }
    /**
     * 加载 接口参数
     */
    function loadInterfaceParams() {
        var config = {
            url: prefix + "/bffParamList",
            type: "post",
            dataType: "json",
            data: "interfaceId="+$("#id").val(),
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    var resultJson = result.data;
                    if(!resultJson) {
                        return false;
                    }
                    doPreview(resultJson);
                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config);
    }
    /**
     * 预览
     */
    function doPreview(data) {
        var interfaceType = $("#fbType").val();
        data.interfaceType= interfaceType;
        var contentPreviewTplHtml = $("#contentPreviewTpl").html();

        convertResponse(data);

        laytpl(contentPreviewTplHtml).render(data, function (html) {
            $("#collapse0 .panel-body").remove();
            $("#collapse0").append(html);
        });

        $("#nonFunctionalRequirementsDd").text($("#nonFunctionalRequirements").val())
        $("#interfaceDescriptionDd").text($("#interfaceDescription").val())

        // 加载虚拟用况数据
        var virtualUsageListConfig = {
            url: prefix + "/virtualUsageList?interfaceId="+$("#id").val(),
            type: "post",
            dataType: "json",
            data: null,
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    var data = {};
                    data.list = result.data || [];
                    var paramsTplHtml = $("#virtualUsageTpl2").html();
                    laytpl(paramsTplHtml).render(data, function (html) {
                        $("#virtualUsage").nextAll().remove();
                        $("#virtualUsage").after(html);
                    });
                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(virtualUsageListConfig);
        relationTableList();
    }

    function paramList(idName,interfaceId,interfaceType) {
        idName = idName;
        var params = {};
        params.interfaceId = interfaceId;
        params.interfaceType = interfaceType;
        var resultJson;
        var config = {
            url: prefix + "/paramList",
            type: "POST",
            dataType: "json",
            data: params,
            success: function (result) {
                if (result && result.code == 0) {
                    var data = result.data;
                    var contentPreviewTplHtml = $("#contentPreviewTpl").html();
                    convertResponse(data);
                    data.virtualUsage=true;
                    laytpl(contentPreviewTplHtml).render(data, function (html) {
                        $(idName).empty();
                        $(idName).append(html);
                    });
                }
            }
        };
        $.ajax(config);
    }

    /**
     * 关联表列表函数
     */
    function relationTableList() {
        var params = {};
        params.interfaceId = $("#id").val();
        params.interfaceType = $("#fbType").val();
        var resultJson;
        var config = {
            url: prefix + "/interfaceTableList",
            type: "POST",
            dataType: "json",
            async: false,
            data: params,
            success: function (result) {
                if (result && result.code == 0) {
                    resultJson = result.data;
                }
            }
        };
        $.ajax(config);
        if(!resultJson) {
            return false;
        }
        $.each(resultJson, function (index, a) {
            if (null == a.fieldInfoList || 0 == a.fieldInfoList.length) {
                return;
            }
            let category = a.fieldInfoList[0].category;
            $.each(a.fieldInfoList, function (indexB, b) {
                b.categorySpace = false;
                if (category != b.category) {
                    b.categorySpace = true;
                    category = b.category;
                }
            });
        });
        var contentTableTplHtml = $("#contentTableTpl").html();
        laytpl(contentTableTplHtml).render(resultJson, function (html) {
            $("#content-table").empty();
            $("#content-table").append(html);
        });
    };

    /**
     * 关联页面函数
     */
    function relationPageList() {
        var params = {};
        params.interfaceId = $("#id").val();
        var resultJson;
        var config = {
            url: prefix + "/pageList",
            type: "POST",
            dataType: "json",
            async: false,
            data: params,
            success: function (result) {
                if (result && result.code == 0) {
                    resultJson = result.data;
                }
            }
        };
        $.ajax(config);
        var contentPageTplHtml = $("#contentPageTpl").html();
        laytpl(contentPageTplHtml).render(resultJson, function (html) {
            $("#content-page").empty();
            $("#content-page").append(html);
        });
    };

    /**
     * 关联用况函数
     */
    function relationUsageList() {
        var params = {};
        params.interfaceId = $("#id").val();
        var resultJson;
        var config = {
            url: prefix + "/usageList",
            type: "POST",
            dataType: "json",
            async: false,
            data: params,
            success: function (result) {
                if (result && result.code == 0) {
                    resultJson = result.data;
                }
            }
        };
        $.ajax(config);
        if(!resultJson) {
            return false;
        }
        var contentUsageTplHtml = $("#contentUsageTpl").html();
        laytpl(contentUsageTplHtml).render(resultJson, function (html) {
            $("#content-usage").empty();
            $("#content-usage").append(html);
        });
    };


    /**
     * 虚拟用况组页面
     * @param id
     */
    function virtualUsageGroupDetail(id) {
        $.modal.openTab("虚拟用况组编辑", ctx + "virtualUsageGroup/virtualUsageGroup/edit?id=" + id);
    }

    /**
     * 获取接口别名
     */
    function getImgInterfaceAliasName(){
        var params = {};
        params.pageImgId = pageImgId;
        var resultJson;
        var config = {
            url: ctx + "frontInterfaceFieldSource/frontInterfaceFieldSource/getImgInterfaceAliasName",
            type: "GET",
            dataType: "json",
            data: params,
            success: function (result) {
                if (result && result.code == 0) {
                    $("#alisaName").val(result.msg);
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config);
    }

    /**
     * 设置接口别名
     */
    function submitHandler(){
        var params = {};
        params.pageImgId = pageImgId;
        params.aliasName = $("#alisaName").val();
        var resultJson;
        var config = {
            url: ctx + "frontInterfaceFieldSource/frontInterfaceFieldSource/updateImgInterfaceAliasName",
            type: "POST",
            dataType: "json",
            data: params,
            success: function (result) {
                if (result && result.code == 0) {
                    $.modal.msgSuccess('提交成功');
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config);
    }
</script>

<script id="paramsTpl" type="text/template">
    <div id="list" class="list">
        {{# layui.each(d, function(index, a){ }}
            {{# if(a.objectType == '2'){ }}
            <div class="more mb-12 no-top" style="cursor: default" data-id="{{a.id}}" data-field-id="{{a.fieldId}}" data-object-type="2">
                <div class="list-item">
                    <span class="col-md-5">{{a.fieldName}}</span>
                    <span class="col-md-4">{{a.fieldEnName}}</span>
                </div>
                <div class="sec-list">
                    {{# if(a.children){ }}
                        {{# layui.each(a.children, function(index, b){ }}
                        <div class="list-item" data-id="{{b.id}}">
                            <span class="col-md-4">{{b.fieldName}}</span>
                            <span class="col-md-4">{{b.fieldEnName}}</span>
                            <span class="col-md-2" style="vertical-align: text-bottom;">{{# if(b.isRequired=='Y'){ }}必填{{# }else{}}非必填{{# } }}</span>
                            <a class="pull-right pr15 source-set {{# if(b.frontFieldSource){ }}red{{# } }}"
                               data-id="{{b.id}}"
                               data-type="{{a.objectType}}"
                               data-enname="{{b.fieldEnName}}"
                               data-name="{{b.fieldName}}"
                               data-mockdata="{{encodeURIComponent(b.mockData)}}">来源设置</a>
                        </div>
                        {{# }); }}
                    {{# } }}
                </div>
            </div>
            {{# } else {}}
                {{# if(a.id){ }}
                <div class="list-item mb-12 no-top" style="cursor: default" data-id="{{a.id}}" data-object-type="1">
                    <span class="col-md-4" title="{{a.fieldName}}">{{a.fieldName}}</span>
                    <span class="col-md-3" title="{{a.fieldEnName}}">{{a.fieldEnName}}</span>
                    <span class="col-md-2" style="vertical-align: text-bottom;">{{# if(a.isRequired=='Y'){ }}必填{{# }else{}}非必填{{# } }}</span>
                    <a class="pull-right pr15 source-set {{# if(a.frontFieldSource){ }}red{{# } }}"
                       data-id="{{a.id}}"
                       data-type="{{a.objectType}}"
                       data-enname="{{a.fieldEnName}}"
                       data-name="{{a.fieldName}}"
                       data-mockdata="{{encodeURIComponent(a.mockData)}}">来源设置</a>
                </div>
                {{# } }}
            {{# } }}
        {{# }); }}
    </div>
</script>

<!--关联字段模板-->
<script id="contentPreviewTpl" type="text/template">
    {{# if(d.virtualUsage){ }}
    <dl class="dl-horizontal">
        <dt>接口描述</dt>
        <dd>{{d.interfaceInfo.interfaceDescription}}</dd>
    </dl>
    <div class="panel-tit">参数</div>
    {{# } }}
    <div class="panel-body" style = "border:0px;">
        <ul class="list-group">
            <li class="list-group-item" style="height: auto; padding-top:0px;">
                <div class="re-body">
                    <p>requestBody：//输入参数</p>
                    <p>{</p>
                    <ul class="list-group field">
                        {{# layui.each(d.requestList, function(index, a){ }}
                        {{# if(a.children == null || a.children.length == 0){ }}
                        <li class="list-group-item">
                            {{# if(a.objectType=='2'){ }}
                            <p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '-'}}</p>
                            <br>
                            <p>}],</p>
                            {{# } else { }}
                            <p>"{{a.fieldEnName}}" : "{{a.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{a.fieldName || '-'}}{{a.fieldEnumListName || ''}}</span></p>
                            {{# } }}
                        </li>
                        {{# } else { }}
                        <li class="list-group-item">
                            {{# if(a.children.length > 1){ }}
                            <p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '一'}}</p>
                            <ul class="list-group field">
                                {{# layui.each(a.children, function(index, b){ }}
                                <li class="list-group-item" style = "margin-left:10px;">
                                    <p>"{{b.fieldEnName}}" : "{{b.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{b.fieldName || '一'}}{{b.fieldEnumListName || ''}}</span></p>
                                </li>
                                {{# }); }}
                            </ul>
                            <p>}],</p>
                            {{# } else { }}
                            <p>"{{a.fieldEnName}}" : ["{{a.children[0].mockData || '一'}}"] // {{a.fieldName || '一'}}</p>
                            {{# } }}
                        </li>
                        {{# }}}
                        {{# }); }}
                    </ul>
                    <p>}</p>
                </div>
            </li>
            <li class="list-group-item space"></li>
            <li class="list-group-item" style="height: auto;padding-top:0px;">
                <div class="re-body">
                    <p>response：//返回参数</p>
                    <p>{</p>
                    <ul class="list-group field">
                        <li class="list-group-item">
                            <p>"errCode" : "1",<span style="color: red; display: inline !important;"> //返回状态（true/false）</span></p>
                            <p>"message" : "获取成功",<span style="color: red; display: inline !important;"> //获取成功/获取失败</span></p>
                            <p>"data" : { <span style="color: red; display: inline !important;"> //返回数据</span></p>
                            <ul class="list-group field">
                                {{# layui.each(d.responseList, function(index, a){ }}
                                {{# if(a.children == null || a.children.length == 0){ }}
                                <li class="list-group-item">
                                    {{# if(a.objectType=='2'){ }}
                                    <p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '一'}}</p>
                                    <p>}],</p>
                                    {{# } else { }}
                                    {{# if(a.fieldEnName == 'total' || a.fieldEnName == 'isLastPage' || a.fieldEnName == 'pages'){ }}
                                    <p>"{{a.fieldEnName}}" : {{a.mockData}}, // <span style="color: #FFA500; display: inline !important;">{{a.fieldName || '一'}}{{a.fieldEnumListName || ''}}</span></p>
                                    {{# } else { }}
                                    <p>"{{a.fieldEnName}}" : "{{a.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{a.fieldName || '一'}}{{a.fieldEnumListName || ''}}</span></p>
                                    {{# } }}
                                    {{# } }}
                                </li>
                                {{# } else { }}
                                <li class="list-group-item">
                                    <p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '一'}}</p>
                                    <ul class="list-group field">
                                        {{# layui.each(a.children, function(index, b){ }}
                                        {{# if(b.children == null || b.children.length == 0){ }}
                                        <li class="list-group-item">
                                            {{# if(b.objectType=='2'){ }}
                                            <p>"{{b.fieldEnName}}" : [{ // {{b.fieldName || '一'}}</p>
                                            <p>}],</p>
                                            {{# } else { }}
                                            <p>"{{b.fieldEnName}}" : "{{b.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{b.fieldName || '一'}}{{b.fieldEnumListName || ''}}</span></p>
                                            {{# } }}
                                        </li>
                                        {{# } else { }}
                                        <li class="list-group-item">
                                            <p>"{{b.fieldEnName}}" : [{ // {{b.fieldName || '一'}}</p>
                                            <ul class="list-group field">
                                                {{# layui.each(b.children, function(index, c){ }}
                                                {{# if(c.children == null || c.children.length == 0){ }}
                                                <li class="list-group-item">
                                                    {{# if(c.objectType=='2'){ }}
                                                    <p>"{{c.fieldEnName}}" : [{ // {{c.fieldName || '一'}}</p>
                                                    <p>}],</p>
                                                    {{# } else { }}
                                                    <p>"{{c.fieldEnName}}" : "{{c.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{c.fieldName || '一'}}{{c.fieldEnumListName || ''}}</span></p>
                                                    {{# } }}
                                                </li>
                                                {{# } else { }}
                                                <li class="list-group-item">
                                                    <p>"{{c.fieldEnName}}" : [{ // {{c.fieldName || '一'}}</p>
                                                    <ul class="list-group field">
                                                        {{# layui.each(c.children, function(index, d){ }}
                                                        {{# if(d.children == null || d.children.length == 0){ }}
                                                        <li class="list-group-item">
                                                            {{# if(d.objectType=='2'){ }}
                                                            <p>"{{d.fieldEnName}}" : [{ // {{d.fieldName || '一'}}</p>
                                                            <p>}],</p>
                                                            {{# } else { }}
                                                            <p>"{{d.fieldEnName}}" : "{{d.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{d.fieldName || '一'}}{{d.fieldEnumListName || ''}}</span></p>
                                                            {{# } }}
                                                        </li>
                                                        {{# } else { }}
                                                        <li class="list-group-item">
                                                            <p>"{{d.fieldEnName}}" : [{ // {{d.fieldName || '一'}}</p>
                                                            <ul class="list-group field">
                                                                {{# layui.each(d.children, function(index, e){ }}
                                                                <li class="list-group-item">
                                                                    <p>"{{e.fieldEnName}}" : "{{e.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{e.fieldName || '一'}}{{e.fieldEnumListName || ''}}</span></p>
                                                                </li>
                                                                {{# }); }}
                                                            </ul>
                                                            <p>}],</p>
                                                        </li>
                                                        {{# } }}
                                                        {{# }); }}
                                                    </ul>
                                                </li>
                                                {{# } }}
                                                {{# }); }}
                                            </ul>
                                            <p>}],</p>
                                        </li>
                                        {{# } }}
                                        {{# }); }}
                                    </ul>
                                    <p>}],</p>
                                </li>
                                {{# }}}
                                {{# }); }}
                            </ul>
                            <p>}</p>
                        </li>
                    </ul>
                    <p>}</p>
                </div>
            </li>
        </ul>
    </div>
</script>

<script id="virtualUsageTpl2" type="text/template">
    {{# layui.each(d.list, function(index, a){ }}
    <div class="panel panel-default virtualUsage" title="{{a.description}}">
        <div class="panel-heading" data-toggle="collapse"  href="#collapse{{a.sortNum}}" data-id="{{a.id}}">
            <h1 class="panel-title">
                <span class="badge badge-primary">{{index + 1}}</span>
                <span>{{a.slaveInterfaceName}}&nbsp;&nbsp;{{a.dubboUrl}}</span>
            </h1>
        </div>
        <div id="collapse{{a.sortNum}}" class="panel-collapse collapse"></div>
    </div>
    {{# }); }}
</script>

<!--关联字段模板-->
<script id="contentTableTpl" type="text/template">
    {{# layui.each(d, function(index, a){ }}
    <div class="retation-table">
        <p class="blue-background">
            <img th:src="@{/img/table.png}">
            <span>{{a.tableName}}&nbsp;&nbsp;{{a.tableEnName}}</span>
            <span  style="color: #0088FF;float: right;margin-right: 12px;"><a class = "table-detail" tableId = "{{a.id}}">查看详情</a></span>
        </p>
        <ul class="list-group">
            {{# layui.each(a.fieldInfoList, function(indexB, b){ }}
            {{# if(b.categorySpace) { }}
            <li class="list-group-item space"></li>
            {{# }}}
            <li class="list-group-item">
                <font>{{# if(b.fieldType=='1') { }} PK {{# } else if(b.fieldType == '2') { }} FK {{#} else { }}-{{#}}}</font>
                <span title="{{b.fieldName || ''}}">{{b.fieldName || ''}}</span>
                <span title="{{b.fieldEnName || ''}}">
							{{b.fieldEnName || '一'}}
							{{# if(b.fieldLength) { }}
								({{b.fieldLength}})
							{{# } }}
						</span>
                <span>{{# if(b.fieldDataType=='1') { }} 文本 {{# } else if(b.fieldDataType == '2') { }} 数字 {{#} else { }}时间{{#}}}</span>
            </li>
            {{# }); }}
        </ul>
    </div>
    {{# }); }}
</script>

<!--关联页面模板-->
<script id="contentPageTpl" type="text/template">
    <div>
        <p>
            <img th:src="@{/img/document.png}"/>
            <span>接口局部页面(<span id="interfacePartNum">{{d.interfaceFileList.length}}</span>)</span>
        </p>
        <ul class="list-group" id="interfacePartUl">
            {{# layui.each(d.interfaceFileList, function(indexB, b){ }}
            <li class="list-group-item"><img class = "partPage" src="{{b.filePath}}" th:onerror="this.src='/img/default-img.png'"/><p style="text-align: center">{{b.fileName}}</p></li>
            {{# }); }}
        </ul>
    </div>
    <div>
        <p>
            <img th:src="@{/img/document.png}" style = "margin-top:-3px;"/>
            <span>关联结构页面({{d.pageFileList.length}})</span>
        </p>
        <ul class="list-group">
            {{# layui.each(d.pageFileList, function(indexB, b){ }}
            <li class="list-group-item"><img class = "partPage" src="{{b.filePath}}" th:onerror="this.src='/img/default-img.png'"/><p style="text-align: center"><a data-id="{{b.id}}" class="pageImgName">{{b.fileName}}</a></p></li>
            {{# }); }}
        </ul>
    </div>
</script>

<!--关联用况模板-->
<script id="contentUsageTpl" type="text/template">
    <ul class="list-group">
        {{# layui.each(d, function(index, a){ }}
        <li class="list-group-item">
            <div class="list-tit">
                <p>
                    <span>{{# if(a.fbType=='1') { }} 前台 {{#} else { }}后台{{#}}}</span>
                    <span>{{# if(a.usageType=='1') { }} 增 {{# } else if(a.usageType == '2') { }} 删 {{# } else if(a.usageType == '3') { }} 改 {{#} else { }}查{{#}}}</span>
                    <span>{{a.usageyName || ''}}</span>
                    <span style="color: #0088FF;float: right;margin-right: 12px;"><a class = "usage-detail" usageId = "{{a.id}}">查看详情</a></span>
                </p>
                <p>
                    <span>用况架构</span>
                    <span>
							{{# if(a.clientType=='1') { }} PCweb {{# } else if(a.clientType == '2') { }} H5 {{# } else if(a.clientType == '3') { }} APP {{#} else { }} 微信小程序 {{#}}}
							· {{# if(a.isAlone=='1') { }} 单模块 {{#} else { }} 非单模块 {{# }}}
							· {{# if(a.versionType=='1') { }} 新功能 {{# } else if(a.versionType == '2') { }} 优化 {{#} else { }} 废弃 {{#}}}
						</span>
                </p>
            </div>
            <div class="list-content">
                <p>用况故事</p>
                <p>{{a.usageStory || '无'}}</p>
            </div>
            <div class="list-content">
                <p>价值描述</p>
                <p>{{a.valueDescription || '无'}}</p>
            </div>
            <div class="list-content">
                <p>业务实现逻辑</p>
                <p>{{a.businessImplDescription || '无'}}</p>
            </div>
            <div class="list-content">
                <p>优化或废弃说明</p>
                <p>{{a.versionDescription || '无'}}</p>
            </div>
        </li>
        {{# }); }}
    </ul>
</script>
</body>
</html>
